<template>
  <view>
    <view class="top-bg">
      <u-navbar
        title="积分中心"
        bgColor="transparent"
        placeholder
        auto-back
      ></u-navbar>
      <view>
        <view class="pt-80 pl-24 pb-60 text-14 color-gray">
          可用积分<text class="text-24 ml-8 color-primary">{{
            digitalPointsBalance
          }}</text>
        </view>
      </view>
      <view class="bg-white tabs-box flex items-center">
        <view class="flex-1">
          <u-tabs
            :list="tabList"
            line-color="#8ac7b0"
            :scrollable="false"
            :activeStyle="{
              color: '#8ac7b0',
              transform: 'scale(1.05)',
            }"
            :inactiveStyle="{
              color: '#666',
              transform: 'scale(1)',
            }"
            itemStyle="height: 44px;"
          >
          </u-tabs>
        </view>

        <view class="pr-12">
          <u-icon
            name="arrow-down"
            size="32rpx"
            label="近三月"
            label-pos="left"
            label-color="#666"
            @click="show = true"
          ></u-icon>
        </view>
      </view>
    </view>
    <z-paging
      ref="paging"
      v-model="integralList"
      @query="queryList"
      scrollable
      :height="`calc(100vh - ${topHeight}px)`"
      :fixed="false"
      :auto-hide-loading-after-first-loaded="false"
      :use-page-scroll="false"
    >
      <template #loading>
        <view class="w-full h-full flex items-center justify-center">
          <u-loading-icon mode="circle" color="#86bf9e"></u-loading-icon>
        </view>
      </template>

      <view class="p-12 flex-col gap-12" v-for="item in integralList">
        <view class="flex items-center shadow-card">
          <view class="mr-12">
            <u-image width="100rpx" height="100rpx" radius="8"> </u-image>
          </view>
          <view class="mr-24 flex-1">
            <view class="ellipsis-1 text-14 color-black">李宁短袖男款</view>
            <view class="ellipsis-1 text-12 color-gray mt-8"
              >购物送积分 2024-08-15</view
            >
          </view>
          <view class="color-primary">+25</view>
        </view>
      </view>
    </z-paging>
    <u-picker
      @close="close"
      :show="show"
      :columns="columns"
      @cancel="close"
      @confirm="confirm"
      confirmColor="#8ac7b0"
    ></u-picker>
  </view>
</template>

<script>
import { fetchCustomerWalletInfo } from "@/services/api";

export default {
  data() {
    return {
      tabList: [
        { name: "全部" },
        { name: "获取" },
        { name: "消耗" },
        { name: "退回" },
      ],
      show: false,
      columns: [["全部", "近三月", "本月"]],
      topHeight: 240,
      digitalPointsBalance: 0,
      //积分列表
      integralList: [],
    };
  },
  methods: {
    confirm(e) {
      console.log(e.value[0]);
      this.show = false;
    },
    close() {
      this.show = false;
    },
    getTopHeight() {
      this.$uGetRect(".top-bg").then((res) => {
        console.log(res);
        this.topHeight = res.height;
      });
    },
    /**
     * 获取用户积分
     */
    async getUserIntegral() {
      const { data, error } = await fetchCustomerWalletInfo();
      this.digitalPointsBalance = data.digitalPointsBalance;
    },
    queryList() {},
  },
  mounted() {
    this.getTopHeight();
    this.getUserIntegral();
  },
};
</script>
<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.tabs-box {
  border-radius: 24rpx 24rpx 0 0;
}
.top-bg {
  background: linear-gradient(90deg, #f7f7f7, #a3dbce);
  min-height: 500rpx;
}
.shadow-card {
  padding: 24rpx;
  border-radius: 12rpx;
  background: white;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
</style>
